<template>
  <div class="designer-project">
    <PageView :pageData="Page" @operateChange="operateChange"> </PageView>
  </div>
</template>

<script setup>
import {
  getProjectsList,
  createProjects,
  editProjects,
  deleteProjects,
  packageProjects,
} from "@/api/designer/projects";
import { watch } from 'vue';
import { useRoute } from 'vue-router';

const operateChange = (info, data) => {
  switch (info.key) {
    case "package":
      packageProjects({
        id: data._id,
      }).then((res) => {
        if (res.code == 200) {
          ElMessage.success("打包成功");
        }
      });
      break;
  }
};

/**
 * 表格数据绑定
 */
const Page = markRaw({
  addBtn: {
    label: "添加",
    type: "primary",
    icon: "icon iconfont icon-add",
    method: createProjects,
  },
  form: {
    data: [
      {
        type: "Input",
        field: "name",
        label: "项目名称",
        value: "",
        placeholder: "项目名称",
        allowClear: true,
      },
    ],
    btns: [
      {
        label: "查询",
        key: "search",
        icon: "icon iconfont icon-sousuo1",
        type: "primary",
      },
    ],
  },
  table: {
    columns: [
      {
        title: "项目名称",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "项目标识",
        dataIndex: "code",
        key: "code",
      },
      {
        title: "api地址",
        dataIndex: "apiUrl",
        key: "apiUrl",
      },
      {
        title: "操作时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "操作",
        width: 200,
        key: "operate",
        btns: [
          {
            label: "打包",
            class: "table_edit-btn",
            icon: "icon iconfont icon-bianji",
            key: "package",
            argKey: "_id",
          },
          {
            label: "编辑",
            class: "table_edit-btn",
            icon: "icon iconfont icon-bianji",
            key: "edit",
            argKey: "_id",
            method: editProjects,
          },
          {
            label: "删除",
            class: "table_del-btn",
            icon: "icon iconfont icon-shanchu",
            key: "delete",
            content: "请确认是否删除？",
            argKey: "_id",
            method: deleteProjects,
          },
        ],
      },
    ],
    data: getProjectsList,
  },
  modal: {
    title: "项目",
    width: 500,
    className: "spec-modal",
    data: [
      {
        type: "Input",
        field: "name",
        label: "项目名称：",
        value: "",
        labelWidth: "90px",
        placeholder: "项目名称",
        rules: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "code",
        label: "项目标识：",
        value: "",
        labelWidth: "90px",
        placeholder: "项目标识",
        rules: [
          {
            required: true,
            message: "请输入项目标识",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Select",
        field: "template",
        label: "模板：",
        value: null,
        labelWidth: "90px",
        placeholder: "模板",
        rules: [
          {
            required: true,
            message: "请输入模板",
            trigger: "blur",
          },
        ],
        options: [
          {
            label: "后台模板",
            value: 1,
          },
          {
            label: "app模板",
            value: 2,
          },
        ],
      },
      {
        type: "Input",
        field: "apiUrl",
        label: "api地址：",
        value: "",
        labelWidth: "90px",
        placeholder: "api地址",
        rules: [
          {
            required: true,
            message: "请输入api地址",
            trigger: "blur",
          },
        ],
      },
    ],
  },
});

const route = useRoute();

watch(
  () => route.path,
  (newPath, oldPath) => {
    console.log(`Route changed from ${oldPath} to ${newPath}`);
    // Add any additional logic you want to execute on route change
  }
);
</script>
